<template>
    <div class="right-content">
        <div class="schedule">
          <!-- 左边区域 -->
          <div class="left">
            <el-form :inline="true">
                <el-form-item>
                    <el-input v-model="search_schedule" placeholder="搜索日程"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      style="height: 38px; width: 54px; font-size: 20px; padding: 9px 16px">
                    </el-button>
                </el-form-item>
            </el-form>
            <el-calendar v-model="value" id="calendar">
            </el-calendar>
          </div>
          <!-- 右边区域 -->
          <div class="right">
            <el-calendar v-model="value">
              <template slot="dateCell" slot-scope="{ data }">
                <div
                  :class="data.isSelected ? 'is-selected' : ''"
                >
                  <p @click="calItem(data.day)">
                    {{ data.day.split('-').slice(1).join('-') }}
                  </p>
                  <div
                    v-for="(item, index) in dealMyDate(data.day)"
                    :key="index"
                  >
                    <i class="dot"></i>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.content"
                      placement="top-start"
                    >
                      <span
                        :class="
                          item.grade == '紧急日程'
                            ? 'is-success'
                            : item.grade == '一般日程'
                            ? 'is-common'
                            : 'is-danger'
                        "
                        @click="calItem(data.day)"
                      >
                        {{ item.content }}
                      </span>
                    </el-tooltip>
                  </div>
                </div>
              </template>
            </el-calendar>
            <!-- 新建日程弹框 -->
            <el-dialog
              title="新建日程"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
              :close-on-click-modal="false"
            >
              <el-form
                @submit.native.prevent
                :ref="editForm"
                :model="editForm"
              >
                <el-form-item label="日程" prop="content">
                  <el-input v-model="editForm.content" placeholder="添加日程、会议、活动等标题"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                  <el-switch
                    v-model="switchValue"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                    全天
                  </el-switch>
                </el-form-item>
                <el-form-item>
                  <el-input placeholder="添加联系人或群聊"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input placeholder="添加地点或会议室"></el-input>
                </el-form-item>
                <el-form-item label="性质" prop="grade">
                  <el-radio-group v-model="editForm.grade">
                    <el-radio label="一般日程"></el-radio>
                    <el-radio label="紧急日程"></el-radio>
                    <el-radio label="重要日程"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button
                  type="primary"
                  @click="
                    dialogVisible = false
                    add()
                  "
                >
                  确 定
                </el-button>
              </span>
            </el-dialog>
          </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'MonthSchedule',
  data() {
    return {
      value: new Date(),
      value1: '',
      switchValue: 'true',
      resDate: [
        { date: '2021-11-20', content: '放假丫丫丫丫丫丫丫丫丫', grade: '一般日程' },
        { date: '2021-11-22', content: '去交电费啦啦啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊', grade: '紧急日程' },
        { date: '2021-11-16', content: '去学习vue', grade: '重要日程' },
        { date: '2021-11-22', content: 'aiaiaiaaaiaiia', grade: '紧急日程' }
      ],
      dialogVisible: false,
      rcdata: [],
      editForm: {
        content: '',
        day: '',
        grade: '一般日程'
      },
      search_schedule: '' // 搜索日程
    }
  },
  mounted() {
    this.editBtn()
  },
  methods: {
    editBtn() {
      var span1 = this.$el.querySelectorAll('.el-button-group>.el-button:first-child span')
      span1.forEach(item => {
        item.innerText = '<'
      })
      var span2 = this.$el.querySelectorAll('.el-button-group>.el-button:not(:first-child):not(:last-child) span')
      span2.forEach(item => {
        item.innerText = '本月'
      })
      var span3 = this.$el.querySelectorAll('.el-button-group>.el-button:last-child span')
      span3.forEach(item => {
        item.innerText = '>'
      })
    },
    calItem(day) {
      this.editForm.day = day
      this.rcdata = this.dealMyDate(day)
      this.editForm.content = this.rcdata.content
      this.editForm.grade = this.rcdata.grade
      this.dialogVisible = true
    },
    // 每日日程
    // dealMyDate(day) {
    //   const len = this.resDate.length
    //   const res = []
    //   for (let i = 0; i < len; i++) {
    //     // eslint-disable-next-line eqeqeq
    //     if (this.resDate[i].date == day) {
    //       res.content = this.resDate[i].content
    //       res.grade = this.resDate[i].grade
    //       res.index = i
    //       break
    //     }
    //   }
    //   return res
    // },
    dealMyDate(day) {
      const len = this.resDate.length
      const res = []
      for (let i = 0; i < len; i++) {
        // eslint-disable-next-line eqeqeq
        if (this.resDate[i].date === day) {
          res.push(this.resDate[i])
        }
      }
      return res
    },
    handleClose(done) {
      done()
    },
    add() {
      var a = {
        date: this.editForm.day,
        content: this.editForm.content,
        grade: this.editForm.grade
      }

      if (this.rcdata.grade) {
        this.$set(this.resDate, this.rcdata.index, a)
      } else {
        this.resDate.push(a)
      }
    }
  }
}
</script>

<style>
#calendar{
  width: 280px;
}
#calendar .el-calendar-table .el-calendar-day{
  height: 30px;
  text-align: center;
  color: #202535;
  line-height: 30px;
  font-size: 12px;
}
#calendar .el-button-group>.el-button:first-child {
  width: 30px;
}
#calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after {
  content: ''!important
}
.dot {
  display: inline-block;
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 3px;
  top: -6px;
  background-color: #67c23a;
}
  .is-selected {
    color: #f8a535;
    font-size: 10px;
    margin-top: 5px;
  }
  .is-success {
    /* color: #67c23a; */
    color: black;
    display:inline-block;
    width: 130px;
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -khtml-text-overflow:ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow:ellipsis;
  }
  .is-success:hover {
    background-color: rgba(227,227,228);
    width: 130px;
  }
  .is-danger {
    color: #f56c6c;
    display:inline-block;
    width: 140px;
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -khtml-text-overflow:ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow:ellipsis;
  }
  .is-danger:hover {
    background-color: rgba(227,227,228);
    width: 140px;
  }
  .is-common {
    color: #909399;
    display:inline-block;
    width: 140px;
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -khtml-text-overflow:ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow:ellipsis;
  }
  .is-common:hover {
    background-color: rgba(227,227,228);
    width: 140px;
  }
</style>
